<template>
	<div class="table-box">
		<proTable
			ref="proTableRef"
			:columns="columns"
			:toolButton="false"
			:requestApi="dashboard.GetClientLogPageListApi"
			:initParam="initParam"
			:dataCallback="dataCallback"
		>
		</proTable>
	</div>
</template>
<script lang="ts" setup name="logs">
import { ref, reactive } from "vue";
import dashboard from "@/api/modules/dashboard";
// import { useTable } from "@/hooks/useTable";
import { ColumnProps } from "@/components/ProTable/interface";
import proTable from "@/components/ProTable/index.vue";
// import { Search, Plus, Refresh, CirclePlus, Delete, EditPen, Download, Upload, View } from "@element-plus/icons-vue";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTableRef = ref();
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	order: "",
	sort: ""
	// competitionName: "", //赛事名称
	// competitionProjectName: "", //赛事项目名称
	// eventName: "", //场次名称
	// groupName: "", //组名
	// operation: "", //操作
	// operationName: "", //操作人
	// operationBeginTime: "", //操作开始时间
	// operationEndTime: "" //操作结束时间
});
// // 表格 hooks
// const { tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
// 	useTable(dashboard.GetClientLogPageListApi, initParam);
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	console.log(data.totalCount);
	return {
		list: data.data,
		total: data.totalCount
	};
};
// 搜索菜单结束时间一定要大于开始时间
const disablesDate = (time: any) => {
	let operationBeginTime = proTableRef.value?.searchParam.operationBeginTime;
	if (!operationBeginTime) {
		return false;
	}
	const _minTime = new Date(operationBeginTime).getTime();
	return time.getTime() < _minTime;
};
// 表格配置项
const columns: Partial<ColumnProps>[] = [
	//{ type: "selection", width: 80, fixed: "left"}
	{ prop: "competitionName", label: "赛事名称", search: { el: "input" } },
	{ prop: "competitionProjectName", label: "项目名称", search: { el: "input" } },
	{ prop: "employeeName", label: "参赛人员" },
	{ prop: "eventName", label: "场次名称", search: { el: "input" } },
	{ prop: "groupName", label: "组名", search: { el: "input" } },
	{ prop: "noLocation", label: "号位" },
	{ prop: "operation", label: "操作", search: { el: "input" } },
	{ prop: "operationName", label: "操作人", search: { el: "input" } },
	{ prop: "operationTime", label: "执行时间" },
	{
		prop: "operationBeginTime",
		label: "执行开始时间",
		isShow: false,
		search: { el: "date-picker", props: { type: "date", ["value-format"]: "YYYY-MM-DD" } }
	},
	{
		prop: "operationEndTime",
		label: "执行结束时间",
		isShow: false,
		search: { el: "date-picker", props: { type: "date", ["value-format"]: "YYYY-MM-DD", disabledDate: disablesDate } }
	}
	// { prop: "stateStr", label: "状态" },
	// { prop: "operation", label: "操作", width: 330, fixed: "right" },
];
</script>

<style lang="scss" scoped>
.logs {
	background-color: #fff;
	box-shadow: 2px 2px 5px #888;
	padding: 20px;
}
</style>
